<template>
  <view @touchmove.stop.prevent>
    <view class="tui-actionsheet" :class="{'tui-actionsheet-show':show,'tui-actionsheet-radius':radius}">
      <view v-if="tips" class="tui-actionsheet-tips" :class="{'tui-actionsheet-radius':radius}" :style="{fontSize:size+'rpx',color:color}">
        <text>{{ tips }}</text>
      </view>

      <view :class="[isCancel?'tui-operate-box':'']">
        <block v-for="(item,index) in itemList" :key="index">
          <view
            class="tui-actionsheet-btn tui-actionsheet-divider"
            :class="[!isCancel && index==itemList.length-1?'tui-btn-last':'','color-'+(item.zIndex || 'secondary'),radius&&!index?'tui-actionsheet-radius':'',index==itemList.length-1?'no-border':'']"
            hover-class="hover"
            :hover-stay-time="70"
            :data-index="index"
            @click="handleClickItem"
          >
            <text class="text-32 color-secondary" :style="{color:item.color}">{{ item.text }}</text>
          </view>
        </block>
      </view>
      <view
        v-if="isCancel"
        class="tui-actionsheet-btn tui-actionsheet-cancel"
        :class="{'tui-btn-last':!isHome}"
        hover-class="hover"
        :hover-stay-time="70"
        @click="handleClickCancel"
      >
        <text class="text-32 color-secondary">取消</text>
      </view>
      <view v-if="showBottom" style="background:#FFFFFF;">
        <safe-area-bottom />
      </view>
    </view>
    <!-- #ifndef APP-NVUE -->
    <view class="tui-actionsheet-mask" :class="{'tui-mask-show':show}" @tap="handleClickMask" />
    <!-- #endif -->
  </view>
</template>

<script>
export default {
  name: 'TuiActionsheet',
  props: {
    // 点击遮罩 是否可关闭
    maskClosable: {
      type: Boolean,
      default: true
    },
    // 显示操作菜单
    show: {
      type: Boolean,
      default: false
    },
    // 菜单按钮数组，自定义文本颜色，红色参考色：#e53a37
    itemList: {
      type: Array,
      default: () => [{
        text: '确定',
        color: '#2B2B2B'
      }]
    },
    // 提示文字
    tips: {
      type: String,
      default: ''
    },
    // 提示文字颜色
    color: {
      type: String,
      default: '#808080'
    },
    // 提示文字大小 rpx
    size: {
      type: Number,
      default: 26
    },
    // 是否需要圆角
    radius: {
      type: Boolean,
      default: true
    },
    // 是否需要取消按钮
    isCancel: {
      type: Boolean,
      default: true
    },
    isHome: {
      type: Boolean,
      default: true
    },
    showBottom: {
      type: Boolean,
      default: true
    }
  },
  methods: {
    handleClickMask() {
      if (!this.maskClosable) return
      this.handleClickCancel()
    },
    handleClickItem(e) {
      if (!this.show) return
      const index = Number(e.currentTarget.dataset.index)
      this.$emit('click', {
        index: index,
        ...this.itemList[index]
      })
    },
    handleClickCancel() {
      this.$emit('update:show', false)
      this.$emit('cancel')
    }
  }
}
</script>

<style scoped lang="scss">
	.tui-actionsheet {
		width:750rpx;
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 9999;
    /*#ifndef APP-NVUE*/
		visibility: hidden;
    transition: all 0.25s ease-in-out;
    /*#endif*/
		transform: translate3d(0, 100%, 0);
		transform-origin: center;
		background-color: $color-background;
		min-height: 100rpx;
	}

	.tui-actionsheet-radius {
		border-top-left-radius: 20rpx;
		border-top-right-radius: 20rpx;
		overflow: hidden;
	}

	.tui-actionsheet-show {
		transform: translate3d(0, 0, 0);
    /*#ifndef APP-NVUE*/
		visibility: visible;
    /*#endif*/
	}

	.tui-actionsheet-tips {
		width: 100%;
		padding: 40rpx 60rpx;
    /*#ifndef APP-NVUE*/
		box-sizing: border-box;
    /*#endif*/
		text-align: center;
		background-color: #FFFFFF;
		display: flex;
		align-items: center;
		justify-content: center;
    color:$font-color-t3;
	}

	.tui-operate-box {
		padding-bottom: 14rpx;
	}

	.tui-actionsheet-btn {
		width: 750rpx;
		height: 120rpx;
		background-color: #FFFFFF;
		display: flex;
		align-items: center;
		justify-content: center;
		text-align: center;
		font-size: 32rpx;
		position: relative;
    /*#ifndef APP-NVUE*/
    box-sizing: content-box;
    /*#endif*/
	}

	.tui-btn-last {
    /*#ifndef APP-NVUE*/
		padding-bottom: env(safe-area-inset-bottom);
    /*#endif*/
	}

  /*#ifdef APP-NVUE*/
  .tui-actionsheet-divider{
    border-bottom:2rpx solid $color-border;
  }

  .no-border{
    border-bottom-width:0!important;
  }
  /*#endif*/

  /*#ifndef APP-NVUE*/
	.tui-actionsheet-divider::before {
		content: '';
		width: 100%;
		border-top: 1rpx solid $color-border;
		position: absolute;
		top: 0;
		left: 0;
		-webkit-transform: scaleY(0.5);
		transform: scaleY(0.5);
	}
  /*#endif*/

	.tui-actionsheet-cancel {
		color: $color-primary;
	}

	.tui-actionsheet-mask {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background-color: rgba(0, 0, 0, 0.6);
		z-index: 9996;
		opacity: 0;
    /*#ifndef APP-NVUE*/
		visibility: hidden;
    transition: all 0.3s ease-in-out;
    /*#endif*/
	}

	.tui-mask-show {
		opacity: 1;
    /*#ifndef APP-NVUE*/
		visibility: visible;
    /*#endif*/
	}
</style>
